<template>
  <div class="container">
    <div class="head flex flex-y-center flex-x-center">
      <img src="@/assets/images/icon/goods-detail-service.png">
      <div class="search flex flex-y-center">
        <img src="@/assets/images/icon/search1.png">
        <span>输入搜扫的内容</span>
      </div>
      <img src="@/assets/images/icon/comment.png">
    </div>
    <div class="swiper">
	    <el-carousel indicator-position="none" height="6rem">
	      <el-carousel-item v-for="(item,index) in items" :key="index">
	         <img :src="item.src">
	      </el-carousel-item>
	    </el-carousel>
    </div>
    <div class="category clearfix bd-bottom">
     <div class="item flex flex-col flex-x-center flex-y-center" v-for="(category,index) in categorys" :key="index">
        <img :src="category.src">
     	<span>{{category.navname}}</span>
     </div>
    </div>
   <div class="info">
     <h5><img src="@/assets/images/icon/notice.png"> 邀请好拆红包/拼购/限时购</h5>
     <div class="flex xianshi flex-row">
       <div>
     	 <img class="fill-all" src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
       </div>
        <div>
        <img class="fill-all" src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
        </div>
     </div>
     <div class="maijiaxiu bd-bottom">
     	<div class="tit flex flex-y-center">
     		<div class="line flex-grow-0"></div>
     		<div class="flex-col flex-grow-1">
     			<h3>买家秀</h3>
     			<span>Buyyers show</span>
     		</div>
        <router-link to="meixiang" class="link">
            <h3 class="lex-grow-0">MORE ></h3>
        </router-link>
     	</div>
     	<div class="flex flex-col detail">
     		 <img class="fill-all" src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
     		<div class="text">邀请好拆红包邀请好拆红包邀请好拆红包邀请好拆红包</div>
     	</div>
     </div>
     <div class="every bd-bottom">
     	<div class="tit flex flex-y-center">
     		<div class="line flex-grow-0"></div>
     		<div class="flex-col flex-grow-1">
     			<h3>每日一新</h3>
     			<span>Every day is new</span>
     		</div>
     		<router-link to="xuanyi" class="link">
            <h3 class="lex-grow-0">MORE ></h3>
        </router-link>
     	</div>
     	<div class="scroll clearfix">
     		<div class="item flex-col">
     			<img  src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
     			<div class="info flex-col">
     				<p class="title">TE8554</p>
     				<div class="flex-row">
     					<div class="mony moneyColor flex-grow-1">￥40</div>
     					<div class="mony subtit flex-grow-0">押金：998</div>
     				</div>
     			</div>
     		</div>

     		<div class="item flex-col">
     			<img  src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
     			<div class="info flex-col">
     				<p class="title">TE8554</p>
     				<div class="flex-row">
     					<div class="mony moneyColor flex-grow-1">￥40</div>
     					<div class="mony subtit flex-grow-0">押金：998</div>
     				</div>
     			</div>
     		</div>

     		<div class="item flex-col">
     			<img  src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
     			<div class="info flex-col">
     				<p class="title">TE8554</p>
     				<div class="flex-row">
     					<div class="mony moneyColor flex-grow-1">￥40</div>
     					<div class="mony subtit flex-grow-0">押金：998</div>
     				</div>
     			</div>
     		</div>
     	</div>
     </div>

       <div class="every ">
     	<div class="tit flex flex-y-center ">
     		<div class="line flex-grow-0"></div>
     		<div class="flex-col flex-grow-1">
     			<h3>大家都在穿</h3>
     			<span>Everybody's wearing them</span>
     		</div>
     		<router-link to="xuanyi" class="link">
            <h3 class="lex-grow-0">MORE ></h3>
        </router-link>
     	</div>
     	<div class="scroll clearfix">
     		<div class="item flex-col">
     			<img  src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
     			<div class="info flex-col">
     				<p class="title">TE8554</p>
     				<div class="flex-row">
     					<div class="mony moneyColor flex-grow-1">￥40</div>
     					<div class="mony subtit flex-grow-0">押金：998</div>
     				</div>
     			</div>
     		</div>

     		<div class="item flex-col">
     			<img  src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
     			<div class="info flex-col">
     				<p class="title">TE8554</p>
     				<div class="flex-row">
     					<div class="mony moneyColor flex-grow-1">￥40</div>
     					<div class="mony subtit flex-grow-0">押金：998</div>
     				</div>
     			</div>
     		</div>

     		<div class="item flex-col">
     			<img  src="http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg">
     			<div class="info flex-col">
     				<p class="title">TE8554</p>
     				<div class="flex-row">
     					<div class="mony moneyColor flex-grow-1">￥40</div>
     					<div class="mony subtit flex-grow-0">押金：998</div>
     				</div>
     			</div>
     		</div>
     	</div>
     </div>

  <!-- foot -->
   <router-link to="xuanyi" >
        <img src="@/assets/images/img/guize.png" class="foot">
    </router-link>


   </div>
  </div>
</template>
<script>
export default ({
  name: "zhuye",
  data() {
    return {
      categorys:[
           {title:"婚纱",src:require("@/assets/images/icon/hunsha.png")},
           {title:"婚礼",src:require("@/assets/images/icon/hunli.png")},
           {title:"秀禾服",src:require("@/assets/images/icon/xiuhefu.png")},
           {title:"敬酒服",src:require("@/assets/images/icon/jingjiuli.png")},
           {title:"旗袍",src:require("@/assets/images/icon/qipao.png")},
           {title:"婚礼",src:require("@/assets/images/icon/hunli.png")},
           {title:"宴会",src:require("@/assets/images/icon/yanhui.png")},
           {title:"派对",src:require("@/assets/images/icon/paidui.png")},
           {title:"毕业",src:require("@/assets/images/icon/biye.png")},
           {title:"酒会",src:require("@/assets/images/icon/jiuhui.png")}
       
      

    	],
      src:"http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg",
      items: [
      		{src:"http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg",id:1},
            {src:"http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg",id:2},
            {src:"http://imgsrc.baidu.com/imgad/pic/item/34fae6cd7b899e51fab3e9c048a7d933c8950d21.jpg",id:3}
      ],
      sites: [
        { name: 'Runoob' },
        { name: 'Google' },
        { name: 'Taobao' }
      ]
    }
  },
  mounted(){
      this.getData();
  },
  methods:{
    getData(){
      let _this = this;
       _this.$ajax.post("https://meizubao.wshoto.com/app/index.php?i=5&c=entry&m=wshoto_shop_v3&do=mobile&r=index.get_index").then(function(res){
        console.log(res);
        _this.categorys = res.data.sorts.nav.data
                     
      })
     }
  }
})
</script>
<style lang='less' scoped>
 .container{
    position:fixed;
    top:0;
    bottom:2.5rem;
    left:0;
    width:100%;
    overflow-y:scroll;
    height:auto;
    background-color:#fff;
  }
.head {
  height: 2rem;
  img {
    display: block;
    height: 1rem;
    width: 1rem;
    margin: 0 1rem;
  }
  .search {
    height: 1.6rem;
    line-height: 1.6rem;
    width: 100%;
    color: #80848f;
    font-size: 0.6rem;
    border: 1px solid #e9eaec;
    border-radius: 0.8rem;
    background-color: #eee;
  }
}

.swiper {
  margin-top: 0.1rem;
  width: 100%;
  img{
  	height:6rem;
  	width:100%;
  }
}
.category{
	height:rem;
	width:100%;
	padding:0.5rem 0;
	.item{
		width:20%;
		float:left;
		img{
			height:2rem;
			width:2rem;
		}
		span{
			margin-top:0.2rem;
			font-size:0.5rem;
		}
	}
}
.info{
   h5{
   	padding:0.4rem 1rem;
   	font-size:.6rem;
   	line-height:.8rem;
   	vertical-aligh:middle;
   	font-weight:normal;
   	img{
       height:0.6rem;
       width:0.6rem;
   	 }

   }
   .xianshi{
   	height:5rem;
   	div{
   		display:block;
   		height:100%;
   		width:100%;
   	}
   }
   .maijiaxiu{
	  
	   .detail{
	   	img{
	   		height:8rem;
	   		width:100%;
	   	}
	   	.text{
	   		padding:0.4rem 1rem;
	   		font-size:0.7rem;
	   		line-height:.9rem;
	   		height:auto;
	   		letter-spacing:1px;
	   	}
	   }
   }
   .every{
   	.scroll{
   		overflow-x:auto;
   		overflow-y:hidden;
	   	white-space:nowrap;
	   	height:16rem;
	   	 	.item{
	   	 	white-space:nowrap;
	   		width:7rem;
	   		height:15rem;
	   		margin: .5rem;
	   		display:inline-block;
	   		.title{
	   			padding:.5rem 0;
	   			font-size:.7rem;
	   		}
	   		.money{
	   		}
	   		img{
	   			width:100%;
	   			height:12rem;
	   		}
	   	}
   	}
   }

   .foot{
   	width:100%;
   	height:3rem;
   }
}
.tit{
	   	 padding:.3rem .5rem;
	   	  h3{
		   	font-size:.9rem;
		   	font-weight:normal;
		   }
		   span{
		   	font-size:0.5rem;
		   }
	   }
.line{
	width:1.5px;
	margin:0 .5rem;
	height:1.4rem;
	background-color:#000;
}
.link{
  color:#000;
}
</style>
